<script setup>
import * as THREE from 'three'
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls'
import {ref,onMounted} from 'vue'
let firstThree = ref()
const scene = new THREE.Scene()

const geometry = new THREE.SphereGeometry(100)
// const geometry1 = new THREE.CylinderGeometry(50,20,100)
// const geometry2 = new THREE.PlaneGeometry(100,50)
// const geometry3 = new THREE.CircleGeometry(100)
//因为基础材质不受光源的影响
// 所以这里用漫反射材质
// const metaerial = new THREE.MeshLambertMaterial({
//   color:'red',
//   side:true, // 默认矩形和圆形是单面可见，可以设置这个属性来实现双面可见
// })
// 高光网格材质
const metaerial = new THREE.MeshPhongMaterial({
  color:'#a00',
  shininess:100,  // 高光部分的亮度
  specular:0x444444,  // 高光部分的颜色
})
const mesh = new THREE.Mesh(geometry,metaerial);
mesh.position.set(0,0,0)
scene.add(mesh)
// const mesh1 = new THREE.Mesh(geometry1,metaerial);
// mesh.position.set(200,0,0)
// scene.add(mesh1)
// const mesh2 = new THREE.Mesh(geometry2,metaerial);
// mesh.position.set(500,0,0)
// scene.add(mesh2)
// const mesh3 = new THREE.Mesh(geometry3,metaerial);
// mesh.position.set(900,0,0)
// scene.add(mesh3)

// 点
const pointLight = new THREE.PointLight('#fff',10)
scene.add(pointLight)
// 环境光
const ambient = new THREE.AmbientLight("#fff",0.8)
scene.add(ambient)

const width = window.innerWidth;
const height = window.innerHeight;

const camera = new THREE.PerspectiveCamera(100,width/height,1,8000)
camera.position.set(200,200,200)
camera.lookAt(0,0,0) 

// 解决渲染出来的图像有锯齿
const renderer = new THREE.WebGLRenderer({
  antialias:true, // 启动抗锯齿
});
renderer.setSize(width,height)
// 设置屏幕像素比
renderer.setPixelRatio(window.devicePixelRatio)
renderer.render(scene,camera)

const controls = new OrbitControls(camera,renderer.domElement)
controls.addEventListener("change",function(){
  // 重新渲染，必须有这步操作，否则数据改变，但无法看到
  renderer.render(scene,camera)
})
onMounted(()=>{
  document.getElementById("firstThree").appendChild(renderer.domElement)
})

</script>

<template>
  <div id="firstThree" ref="firstThree"></div>
</template>

<style scoped>
  #firstThree{
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
  }
</style>
